<style>
    .box1-1 {
        width: 100%;
        background: rgba(235, 238, 241, 1);
        padding-top: 50px;
        padding-bottom: 100px;
    }

    .box2-1 {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    /*   视频模块*/
    .box2-1-title {
        /** 文本1 */
        font-size: 32px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 37.5px;
        color: rgba(0, 0, 0, 1);
        vertical-align: middle;
        text-align: center;
        margin-bottom: 30px;
    }

    .box2-1-nav {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-top: 50px;
        flex-wrap: wrap;
    }

    .box2-1-navList {
        /** 文本1 */
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 25.78px;
        color: rgba(163, 173, 183, 1);
        text-align: center;
        vertical-align: middle;
        margin-right: 20px;
        margin-bottom: 15px;
        position: relative;
        padding: 10px 15px;
        cursor: pointer;
    }

    .box2-1-menu-active {
        width: 100%;
        height: 4px;
        opacity: 1;
        position: absolute;
        left: 0;
        bottom: 0;
        background: linear-gradient(0deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.11)), linear-gradient(139.34deg, rgba(144, 243, 206, 1) 0%, rgba(49, 112, 244, 1) 100%);
    }
    
    .box2-1-menu-active-text {
        /* 设置渐变背景 */
        background: linear-gradient(45deg, rgba(144, 243, 206, 1), rgba(49, 112, 244, 1));

        /* 将背景裁剪到文字区域 */
        -webkit-background-clip: text;
        background-clip: text;

        /* 使文字颜色透明，显示背景渐变 */
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;

        /* 可选：增加文字粗细和大小增强效果 */
        font-weight: bold;
    }
    
    .box2-1-video{
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 50px;
        gap: 20px;
    }
    
    .box2-1-videoList {
        flex: 1 1 calc(25% - 20px);
        min-width: 250px;
        margin-bottom: 30px;
    }
    
    .box2-1-videoList-img{
        width: 100%;
        height: 186px;
        opacity: 1;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .box2-1-videoList-test{
        /** 文本1 */
        font-size: 22px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 30px;
        color: rgba(17, 17, 17, 1);
        vertical-align: top;
        margin-top: 15px;
        text-align: center;
    }

    /* 响应式设计 */
    @media (max-width: 1200px) {
        .box2-1 {
            padding: 0 20px;
        }
        
        .box2-1-videoList {
            flex: 1 1 calc(33.333% - 20px);
        }
        
        .box2-1-title {
            font-size: 28px;
        }
        
        .box2-1-navList {
            font-size: 20px;
            margin-right: 15px;
        }
    }
    
    @media (max-width: 992px) {
        .box2-1-videoList {
            flex: 1 1 calc(50% - 20px);
        }
        
        .box2-1-title {
            font-size: 26px;
        }
        
        .box2-1-navList {
            font-size: 18px;
            margin-right: 12px;
        }
    }
    
    @media (max-width: 768px) {
        .box1-1 {
            padding-top: 30px;
            padding-bottom: 60px;
        }
        
        .box2-1 {
            padding: 0 15px;
        }
        
        .box2-1-video {
            gap: 15px;
            margin-top: 30px;
        }
        
        .box2-1-videoList {
            flex: 1 1 calc(50% - 15px);
            min-width: 150px;
        }
        
        .box2-1-videoList-img {
            height: 150px;
        }
        
        .box2-1-videoList-test {
            font-size: 18px;
            line-height: 24px;
            margin-top: 10px;
        }
        
        .box2-1-title {
            font-size: 24px;
            margin-bottom: 20px;
        }
        
        .box2-1-nav {
            margin-top: 30px;
        }
        
        .box2-1-navList {
            font-size: 16px;
            margin-right: 10px;
            margin-bottom: 10px;
            padding: 8px 12px;
        }
    }
    
    @media (max-width: 576px) {
        .box1-1 {
            padding-top: 20px;
            padding-bottom: 40px;
        }
        
        .box2-1 {
            padding: 0 10px;
        }
        
        .box2-1-video {
            gap: 10px;
            margin-top: 20px;
        }
        
        .box2-1-videoList {
            flex: 1 1 100%;
            min-width: 100%;
        }
        
        .box2-1-videoList-img {
            height: 200px;
        }
        
        .box2-1-videoList-test {
            font-size: 16px;
            line-height: 22px;
            margin-top: 8px;
        }
        
        .box2-1-title {
            font-size: 22px;
            margin-bottom: 15px;
        }
        
        .box2-1-nav {
            margin-top: 20px;
        }
        
        .box2-1-navList {
            font-size: 14px;
            margin-right: 8px;
            margin-bottom: 8px;
            padding: 6px 10px;
        }
    }
    
    @media (max-width: 400px) {
        .box2-1-videoList-img {
            height: 150px;
        }
        
        .box2-1-videoList-test {
            font-size: 14px;
            line-height: 20px;
        }
    }
</style>
<div class="box1-1" style="margin-top: 50px">
    <div class="box2-1" style="background: #fff;padding: 30px 20px;">
        <div class="box2-1-title">全部视频</div>
        <div class="box2-1-nav" id="vcate-bar">
            <div class="box2-1-navList" style="color:#000;">视频分类：</div>
        </div>
        <!--视频-->
        <div class="box2-1-video" id="video-list"></div>
        <div id="video-pager" style="margin-top:20px;display:flex;align-items:center;gap:8px;justify-content: center;"></div>
    </div>
</div>
<script src="/assets/js/jquery-2.2.4.min.js"></script>
<script>
(function(){
    var cateId = parseInt("{$id|default=0}") || 0;
    var currentVcateId = 0;
    var currentPage = 1;
    var limit = 12;
    var catesUrl = "{:url('index/videocates')}";
    var listUrl = "{:url('index/videolist')}";

    function renderCategories(items){
        var bar = document.getElementById('vcate-bar');
        if(!bar){return}
        while(bar.children.length > 1){ bar.removeChild(bar.lastChild); }
        bar.appendChild(buildCateItem(0, '全部', true));
        (items||[]).forEach(function(it){
            bar.appendChild(buildCateItem(it.id, it.title));
        });
    }

    function buildCateItem(id, title, active){
        var wrap = document.createElement('div');
        wrap.className = 'box2-1-navList';
        wrap.style.cursor = 'pointer';
        wrap.dataset.vcateId = id;
        var label = document.createElement('div');
        label.textContent = title;
        if(active){ label.className = 'box2-1-menu-active-text'; }
        wrap.appendChild(label);
        if(active){
            var barLine = document.createElement('div');
            barLine.className = 'box2-1-menu-active';
            wrap.appendChild(barLine);
        }
        wrap.addEventListener('click', function(){
            currentVcateId = id;
            currentPage = 1;
            setActiveCate(id);
            loadVideos();
        });
        return wrap;
    }

    function setActiveCate(id){
        var bar = document.getElementById('vcate-bar');
        var nodes = bar.querySelectorAll('.box2-1-navList');
        for(var i=1;i<nodes.length;i++){
            var node = nodes[i];
            var isActive = (parseInt(node.dataset.vcateId) === id);
            var text = node.textContent;
            node.innerHTML = '';
            var label = document.createElement('div');
            label.textContent = text;
            if(isActive){ label.className = 'box2-1-menu-active-text'; }
            node.appendChild(label);
            if(isActive){
                var barLine = document.createElement('div');
                barLine.className = 'box2-1-menu-active';
                node.appendChild(barLine);
            }
        }
    }

    function renderVideos(list){
        var box = document.getElementById('video-list');
        box.innerHTML = '';
        (list||[]).forEach(function(v){
            var item = document.createElement('div');
            item.className = 'box2-1-videoList';
            item.style.cursor = 'pointer';
            var img = document.createElement('img');
            img.className = 'box2-1-videoList-img';
            img.src = v.image || '';
            img.alt = v.title || '视频封面';
            var title = document.createElement('div');
            title.className = 'box2-1-videoList-test';
            title.textContent = v.title || '';
            item.appendChild(img);
            item.appendChild(title);
            item.addEventListener('click', function(){
                window.location.href = '{:url("index/video_detail")}?id=' + v.id;
            });
            box.appendChild(item);
        });
    }

    function renderPager(total, page, pages){
        var pager = document.getElementById('video-pager');
        pager.innerHTML = '';
        if(pages <= 1){ return; }
        function btn(text, p, disabled){
            var a = document.createElement('button');
            a.textContent = text;
            a.style.padding = '6px 12px';
            a.style.border = '1px solid #ccc';
            a.style.background = disabled ? '#eee' : '#fff';
            a.style.cursor = disabled ? 'not-allowed' : 'pointer';
            a.disabled = !!disabled;
            a.addEventListener('click', function(){ currentPage = p; loadVideos(); });
            return a;
        }
        // 在小屏幕上减少显示的页码数量
        var range = window.innerWidth <= 768 ? 1 : 2;
        pager.appendChild(btn('上一页', Math.max(1, page-1), page<=1));
        for(var i=Math.max(1,page-range); i<=Math.min(pages,page+range); i++){
            var b = btn(i, i, i===page);
            pager.appendChild(b);
        }
        pager.appendChild(btn('下一页', Math.min(pages, page+1), page>=pages));
    }

    function loadCategories(){
        if(!cateId){ return; }
        var url = catesUrl + '?cate_id=' + cateId;
        $.getJSON(url, function(res){
            if(res && res.code){ renderCategories(res.data || []); }
        });
    }

    function loadVideos(){
        if(!cateId){ return; }
        var url = listUrl + '?cate_id=' + cateId + '&vcate_id=' + (currentVcateId||0) + '&page=' + currentPage + '&limit=' + limit;
        $.getJSON(url, function(res){
            if(res && res.code){
                var data = res.data || {total:0,list:[],page:1,pages:1};
                renderVideos(data.list);
                renderPager(data.total, data.page, data.pages);
            }
        });
    }

    // 监听窗口大小变化，重新加载视频以适应新布局
    window.addEventListener('resize', function() {
        // 添加防抖机制，避免频繁触发
        clearTimeout(window.resizeTimer);
        window.resizeTimer = setTimeout(function() {
            loadVideos();
        }, 250);
    });
    
    loadCategories();
    loadVideos();
})();
</script>